import React, {
  Component
} from 'react'
import {
  WingBlank,
  WhiteSpace,
  List,
  Toast,
  Button
} from 'antd-mobile'
import {
  createForm
} from 'rc-form'
import styles from './index.scss'

import request from '../../../request'

const Item = List.Item;
const Brief = Item.Brief;

class Registry extends Component {
  state = {
    value: 1,
  }
  onSubmit = () => {
    let _this=this
    this.props.form.validateFields((error, value) => {
      if(value.password !== value.passwordAgain){
        Toast.fail('两次密码输入不一样',3)
        return false
      }else{
        delete value.passwordAgain
      }
      request.post('user/registe',value)
        .then(function (response) {
          if(response.data.retCode==="0000"){
            Toast.success(`${response.data.retMsg}`,1)
            _this.context.router.push('/login')
          }else{
            Toast.fail(`${response.data.retMsg}`,1)
          }
        })
        .catch(function (error) {
          console.log(error);
        });
    });
  }
  validateAccount = (rule, value, callback) => {
    if (value && value.length > 4) {
      callback();
    } else {
      callback(new Error('帐号至少4个字符'));
    }
  }
  render() {
    const {
      getFieldProps,
      getFieldError
    } = this.props.form;
    return (
      <WingBlank size="md">
    <WhiteSpace size="lg" />
    <form>
    <List renderFooter={() => getFieldError('nickName') && getFieldError('nickName')
      && getFieldError('password') && getFieldError('password')
      && getFieldError('refer') && getFieldError('refer')
      && getFieldError('mobilePhone') && getFieldError('mobilePhone')
      .join(',')}>
        <Item
          thumb="../../../images/avator_ico.png"
        ><input {...getFieldProps('nickName', {
            // initialValue: '小蚂蚁',
            rules: [
              { required: true, message: '请输入帐号' },
              { validator: this.validateAccount },
            ],
          })} className={styles.input} type="text" placeholder="请输入账号"/> </Item>
        <Item
          thumb="../../../images/key.png"
        ><input {...getFieldProps('password', {
            // initialValue: '小蚂蚁',
            rules: [
              { required: true, message: '请设置密码' },
              { validator: this.validateAccount },
            ],
          })} className={styles.input} type="password" placeholder="请设置密码"/> </Item>
        <Item
          thumb="../../../images/key.png"
        ><input {...getFieldProps('passwordAgain', {
            // initialValue: '小蚂蚁',
            rules: [
              { required: true, message: '请再次输入密码' },
              { validator: this.validateAccount },
            ],
          })} className={styles.input} type="password" placeholder="请再次输入密码"/> </Item>
        <Item
          thumb="../../../images/avator_ico.png"
        ><input {...getFieldProps('refer', {
            // initialValue: '小蚂蚁',
            rules: [
              { required: false },
              { validator: this.validateAccount },
            ],
          })} className={styles.input} type="text" placeholder="邀请码(选填,邀请用户的数字ID)"/> </Item>
        <Item
          thumb="../../../images/avator_ico.png"
        ><input {...getFieldProps('mobilePhone', {
            // initialValue: '小蚂蚁',
            rules: [
              { required: false },
              { validator: this.validateAccount },
            ],
          })} className={styles.input} type="text" placeholder="手机号码(找回密码信息)"/> </Item>
      </List>
      <WhiteSpace size="lg" />
      <Button style={{width:"100%"}} type="primary" onClick={this.onSubmit} inline>注册</Button>
      </form>
  </WingBlank>
    )
  }
}

Registry.contextTypes = {
  router: React.PropTypes.object.isRequired
}

export default createForm()(Registry);